import React, { Component } from "react";

// 单独的context模块文件
import CountContext from "./myContext";

/**
 * Context使用步骤：
 * 1. 调用 React.createContext() 创建 Provider（提供数据） 和 Consumer（消费数据） 两个组件
 * 2. 使用 Provider 组件作为父节点
 * 3. 设置 value 属性，表示要传递的数据。
 * 4. 调用 Consumer 组件接收数据
 */

// // 创建context对象
// const { Provider, Consumer } = React.createContext();

class Child3 extends Component {
  render() {
    return (
      <div>
        <h3>我是类组件3</h3>
        <CountContext.Consumer>
          {/* 回调函数接收数据 */}
          {(data) => {
            console.log("接收祖先组件共享的数据", data);
            return <p>接收祖先组件共享的数据3:{data}</p>;
          }}
        </CountContext.Consumer>
      </div>
    );
  }
}

const Child2 = () => {
  return (
    <div>
      <h2>函数组件2</h2>
      <CountContext.Consumer>
        {/* 回调函数接收数据 */}
        {(data) => {
          console.log("接收祖先组件共享的数据", data);
          return <p>接收祖先组件共享的数据2:{data}</p>;
        }}
      </CountContext.Consumer>
      <Child3 />
    </div>
  );
};

class Child1 extends Component {
  render() {
    return (
      <div>
        <h1>我类组件1</h1>
        <Child2 />
      </div>
    );
  }
}

// 根组件
class App extends Component {
  state = {
    count: 0,
  };

  render() {
    return (
      <CountContext.Provider value={this.state.count}>
        <h1>跨多级组件通信Context对象使用</h1>
        <hr />
        <Child1 />
      </CountContext.Provider>
    );
  }
}

export default App;
